<script lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue'
import { areaList } from '@vant/area-data'

export default {
  setup() {
    const app = getCurrentInstance()

    const applicantName = ref('') // 申请人姓名
    const applicantIdCard = ref('') // 申请人身份证号
    const applicantAddress = ref('') // 申请人地址
    const applicantBirth = ref('') // 申请人出生日期
    const showApplicantBirthPicker = ref(false)
    const onShowApplicantBirthConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
      applicantBirth.value = selectedValues.join('/')
      showApplicantBirthPicker.value = false
    }
    const applicantBirthArea = ref('') // 申请人出生地
    const hgAreaList = ref(areaList)
    onMounted(() => {
      hgAreaList.value = areaList
      hgAreaList.value.province_list = {
        420000: '湖北省'
      }
      ;(hgAreaList.value.city_list = { '421100': '黄冈市' }),
        // 更新用户信息
        app?.proxy?.$functions.updateUserInfo(applicantName, null, applicantIdCard, null)
    })
    const showApplicantBirthArea = ref(false)
    const onShowApplicantBirthAreaConfirm = ({
      selectedOptions
    }: {
      selectedOptions: { text: string }[]
    }) => {
      applicantBirthArea.value = selectedOptions.map((item: { text: any }) => item.text).join('')
      showApplicantBirthArea.value = false
    }
    const applicantNationality = ref('') // 申请人民族
    const nationalityList = ref([
      { text: '汉族', value: '汉族' },
      { text: '蒙古族', value: '蒙古族' },
      { text: '回族', value: '回族' },
      { text: '藏族', value: '藏族' },
      { text: '维吾尔族', value: '维吾尔族' },
      { text: '苗族', value: '苗族' },
      { text: '彝族', value: '彝族' },
      { text: '壮族', value: '壮族' },
      { text: '布依族', value: '布依族' },
      { text: '朝鲜族', value: '朝鲜族' },
      { text: '满族', value: '满族' },
      { text: '侗族', value: '侗族' },
      { text: '瑶族', value: '瑶族' },
      { text: '白族', value: '白族' },
      { text: '土家族', value: '土家族' },
      { text: '哈尼族', value: '哈尼族' },
      { text: '哈萨克族', value: '哈萨克族' },
      { text: '傣族', value: '傣族' },
      { text: '黎族', value: '黎族' },
      { text: '傈僳族', value: '傈僳族' },
      { text: '佤族', value: '佤族' },
      { text: '畲族', value: '畲族' },
      { text: '高山族', value: '高山族' },
      { text: '拉祜族', value: '拉祜族' },
      { text: '水族', value: '水族' },
      { text: '东乡族', value: '东乡族' },
      { text: '纳西族', value: '纳西族' },
      { text: '景颇族', value: '景颇族' },
      { text: '柯尔克孜族', value: '柯尔克孜族' },
      { text: '土族', value: '土族' },
      { text: '达斡尔族', value: '达斡尔族' },
      { text: '仫佬族', value: '仫佬族' },
      { text: '羌族', value: '羌族' },
      { text: '布朗族', value: '布朗族' },
      { text: '撒拉族', value: '撒拉族' },
      { text: '毛南族', value: '毛南族' },
      { text: '仡佬族', value: '仡佬族' },
      { text: '锡伯族', value: '锡伯族' },
      { text: '阿昌族', value: '阿昌族' },
      { text: '普米族', value: '普米族' },
      { text: '塔吉克族', value: '塔吉克族' },
      { text: '怒族', value: '怒族' },
      { text: '乌孜别克族', value: '乌孜别克族' },
      { text: '俄罗斯族', value: '俄罗斯族' },
      { text: '鄂温克族', value: '鄂温克族' },
      { text: '德昂族', value: '德昂族' },
      { text: '保安族', value: '保安族' },
      { text: '裕固族', value: '裕固族' },
      { text: '京族', value: '京族' },
      { text: '塔塔尔族', value: '塔塔尔族' },
      { text: '独龙族', value: '独龙族' },
      { text: '鄂伦春族', value: '鄂伦春族' },
      { text: '赫哲族', value: '赫哲族' },
      { text: '门巴族', value: '门巴族' },
      { text: '珞巴族', value: '珞巴族' },
      { text: '基诺族', value: '基诺族' }
    ])
    const showApplicantNationalityPicker = ref(false)
    const onShowApplicantNationalityConfirm = ({ selectedOptions }: { selectedOptions: any }) => {
      applicantNationality.value = selectedOptions[0]?.text
      showApplicantNationalityPicker.value = false
    }
    const applicantEducationLevel = ref('研究生') // 申请人文化程度
    const applicantType = ref('返乡创业人员') // 申请人类型
    const applicantSubType = ref('') // 申请人子类型
    const applicantHomeAddress = ref('') // 申请人户籍地址
    const showApplicantHomeAddress = ref(false)
    const onShowApplicantHomeAddressConfirm = ({
      selectedOptions
    }: {
      selectedOptions: { text: string }[]
    }) => {
      applicantHomeAddress.value = selectedOptions.map((item: { text: any }) => item.text).join('')
      showApplicantHomeAddress.value = false
    }
    const returnProofs = ref([]) // 返乡人员证明材料
    const extraInfos = ref([]) // 补充信息
    const socialCardImages = ref([]) // 社保卡影像
    const socialCard = ref('') // 社保卡
    const socialCardBank = ref('') // 社保卡开户行
    const supplementaryInformation = ref('') // 补充信息

    return {
      applicantName,
      applicantIdCard,
      applicantAddress,
      applicantBirth,
      showApplicantBirthPicker,
      onShowApplicantBirthConfirm,
      applicantBirthArea,
      showApplicantBirthArea,
      onShowApplicantBirthAreaConfirm,
      hgAreaList,
      applicantNationality,
      nationalityList,
      showApplicantNationalityPicker,
      onShowApplicantNationalityConfirm,
      applicantEducationLevel,
      applicantType,
      applicantSubType,
      applicantHomeAddress,
      showApplicantHomeAddress,
      onShowApplicantHomeAddressConfirm,
      returnProofs,
      extraInfos,
      socialCardImages,
      socialCard,
      socialCardBank,
      supplementaryInformation
    }
  }
}
</script>

<template>
  <van-cell-group>
    <!--申请人姓名-->
    <van-field
      name="applicantName"
      v-model="applicantName"
      label="姓名"
      placeholder="请输入申请人姓名"
      required
      :rules="[{ required: true, message: '请输入申请人姓名' }]"
    />
    <!--身份证号-->
    <van-field
      name="applicantIdCard"
      v-model="applicantIdCard"
      label="身份证号"
      placeholder="请输入申请人身份证号"
      required
      :rules="[{ required: true, message: '请输入申请人身份证号' }]"
    />
    <!-- 申请人类型 -->
    <van-field
      name="applicantType"
      label="申请人类型"
      required
      :rules="[{ required: true, message: '请选择申请人类型' }]"
    >
      <template #input>
        <van-radio-group v-model="applicantType" direction="horizontal">
          <van-radio name="返乡创业人员">返乡创业人员</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!-- 申请人人员子类型 -->
    <van-field
      type="text"
      label="人员子类型"
      placeholder="请选择申请人人员子类型"
      required
      :rules="[{ required: true, message: '请选择申请人人员子类型' }]"
    >
      <template #input>
        <van-radio-group v-model="applicantSubType">
          <van-radio name="大学生">大学生</van-radio>
          <van-radio name="退役士兵">退役士兵</van-radio>
          <van-radio name="农民工">农民工</van-radio>
          <van-radio name="其他人员">其他人员</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!--返乡人员证明材料-->
    <van-field
      name="returnProofs"
      label="返乡人员外出证明材料"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传返乡人员外出证明材料' }]"
    >
      <template #input>
        <van-uploader v-model="returnProofs" multiple />
      </template>
    </van-field>
    <!-- 社会保障卡影像件 -->
    <van-field
      name="socialCardImages"
      label="社会保障卡影像件"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传社会保障卡影像件' }]"
    >
      <template #input>
        <van-uploader v-model="socialCardImages">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </template>
    </van-field>
    <van-cell title="说明：社保卡需开通存储卡功能。" />
    <!--补充信息-->
    <van-field name="extraInfos" label="补充信息">
      <template #input>
        <van-uploader v-model="extraInfos">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </template>
    </van-field>
  </van-cell-group>
</template>

<style scoped>
.preview-cover {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
